<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>用户角色管理</span>
            
        </div>
        <div class="app-container">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="loginName"
                label="用户ID"
                sortable
                width="140"
               
                >
                </el-table-column>
                <el-table-column
                prop="realName"
                label="姓名"
                width="110">
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="建立时间"
                :formatter="formatter">
                </el-table-column>
                <el-table-column
                prop="roleId"
                label="角色类型"
                width="140"
                :filters="[{ text: '领导', value: '领导' }, { text: '上级领导', value: '上级领导' }, { text: '管理员', value: '管理员' },{ text: '员工', value: '员工' }]"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.roleId === '2' ? 'primary' : 'success'"
                    disable-transitions>{{scope.row.roleId}}</el-tag>
                </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand">
                        <el-button type="primary">
                            修改角色<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item  :command="composeValue(item[0],scope.$index)" >领导</el-dropdown-item>
                            <el-dropdown-item :command="composeValue(item[1],scope.$index)">上级领导</el-dropdown-item>
                            <el-dropdown-item :command="composeValue(item[2],scope.$index)">员工</el-dropdown-item>
                            
                        </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    
                </el-table-column>
            </el-table>

            <!-- 工作日设定提示框 锁死-->
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="40%"
              :before-close="handleClose">
              <span style="font-size:20px;line-height:35px">您尚未设定工作日，请先<span style="color:red">设定工作日</span>，再进行其他操作！</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="gotoWorkDay">转到工作日管理</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
              </span>
            </el-dialog>
        </div>
    <!-- 用户信息列表 -->
    </el-card>
</template>

<script>
import qs from "qs";
import axios from 'axios'



 //用来请求刷新用户列表的方法
function updateInfo() {
  this.$axios
  .post("http://localhost:8088/getAllUsers", qs.stringify({}), {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  })
  .then(res => {
    console.log(res.data.data[0])
    this.$store.commit("user_List", res.data.data[0]);
    this.tableData = res.data.data[0];

    for (let i in this.tableData) {
      
      if (this.tableData[i].roleId === 1) {
        this.tableData[i].roleId = "管理员";
      } else if (this.tableData[i].roleId === 2) {
        this.tableData[i].roleId = "领导";
      } else if (this.tableData[i].roleId === 3) {
        this.tableData[i].roleId = "上级领导";
      } else {
        this.tableData[i].roleId = "员工";
      }
    }
    
  })
  .catch(err => {
    console.log(err);
  });
}
export default {
  data() {
    return {
      list: [
        
      ],
      item: [2, 3, 4],
      tableData: [],
      listLoading: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      dialogVisible:false,
      formLabelWidth: "120px"
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  created() {
    this.$axios
      .post("http://localhost:8088/getAllUsers", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log("far")
        this.$store.commit("user_List", res.data.data[0]);
        this.tableData = res.data.data[0];

        for (let i in this.tableData) {
         
          if (this.tableData[i].roleId === 1) {
            this.tableData[i].roleId = "管理员";
          } else if (this.tableData[i].roleId === 2) {
            this.tableData[i].roleId = "领导";
          } else if (this.tableData[i].roleId === 3) {
            this.tableData[i].roleId = "上级领导";
          } else {
            this.tableData[i].roleId = "员工";
          }
        }

        // 判定是否设置了工作日
        let value = window.localStorage.getItem("setDay")
        let flag = value ==="false" ? false : true;
        if(!flag){
          console.log("flag")
          this.dialogVisible = true
        }
        
      })
      .catch(err => {
        console.log(err);
      });
      
  },
  methods: {
    addUser() {},
    prevList() {
      console.log("previos");
    },
    nextList() {
      console.log("next");
    },
    formatter(row, column) {
      return row.createTime;
    },
    filterTag(value, row) {
      return row.roleId == value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
   

    handleCommand(command) {
      let index =command.item
      let role = command.button
      let roleName
      if(role == 2){
        roleName = "领导"
      }else if(role == 3){
        roleName = "上级领导"
      }else{
        roleName = "员工"
      }
      this.$axios
      .post("http://localhost:8088/updateUser", qs.stringify({
        id:this.tableData[index].id,
        roleId: role
      }), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data)
        this.$notify({
          title: '成功',
          message: res.data.message,
          type: 'success'
        });
        this.tableData[index].roleId = roleName

      })
      .catch(err => {
        console.log(err);
      });
    },
    composeValue(item, index) {
      return {
        'button': item,
        'item': index
      }
    },
    gotoWorkDay (){
      // console.log(1)
      this.dialogVisible = false
      this.$router.push({path:"/workDay/workDay"})  
    },
    handleClose (){

    }

    
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  span {
    font-size: 20px;
    line-height: 40px;
  }
}
.box-card {
  margin: 10px;
}

.app-container {
  padding: 0;
}
.el-dropdown-link {
  color: #409eff;
}

.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
